Goodbye reach-router
在reach-router彻底死掉之前,记录一下它存在过。reach-router的作者是Ryan Florence,他同时也是react-router的作者之一。
19年作者表示reach-router将会在reach-router中新生(React Training: The Future of React Router and @reach/router)。
现在回头一看,原来react-router 5.x早在两年前就发布了。这两年我一直有在使用 reach-router,因为它功能够用、表达简洁。
对比react-router和reach-router Router的写法。
{/* react-router */}
<Router>
<Switch>
<Route exact path="/dashboard">
<DashboardRoute prop={false} />
</Route>
</Switch>
</Router>
{/* reach-router */}
<Router>
<DashboardRoute path="/dashboard" prop={false} />
</Router>可以看出 reach-router 简洁许多。
reach-router还有一个很棒的特性是Nesting and Relative Links,举个例子,比如你当前处于/dashboard。
前往/dashboard/trends,你可以有下面两种写法,第二种写法就是Relative Links。
<Link to="/dashboard/trends" />
<Link to="trends" />如果你要返回/dashboard,你还可以这么写。
<Link to="../" />当然react-router4.x也开始支持Nesting and Relative Links了,但不如reach-router实现得好。
这是reach-router印象较为深刻的特性,除此之外reach-router是更容易上手的,概念更少,也更符合直觉。
reach-router定义的路由,默认就是严格匹配的,如果你想模糊匹配你就必须用Trailing Wildcard。 例如定义嵌套路由的写法,UserCenter 中会定义嵌套路由。
{/* reach-router */}
<UserCenter path="/user/*" />
{/* react-router */}
<Route path="/user">
<UserCenter/>
<Route>这就是我觉得reach-router更符合直觉的地方。
当然话说回来,相对react-router,reach-router的简洁也意味简陋,很多特性是缺失的,例如拦截路由进出等功能。还是推荐大家使用react-router吧,Goodbye reach-router。